<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*
    block 块元素
    inline 行内元素
    inline-block 块元素，但是具有行内元素的特性，可以内联，在一行
    */
    body,div,span{
      margin: 0;
      padding: 0;
      border: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    #div1,#span1{
      vertical-align: middle;
    }
  </style>
</head>
<body>

<div id="div1">div块元素</div>
<span id="span1">span行内元素</span>

</body>
</html>